<template>
  <div class="j-password-input">
    <slot/>
    <van-password-input
      :value="value"
      :focused="showKeyboard"
      @focus="showKeyboard = true"
    />
    <van-number-keyboard
      :show="showKeyboard"
      @input="onInput"
      @delete="onDelete"
    />
  </div>
</template>
<script>
export default {
  name: 'JPasswordInput',
  data() {
    return {
      value: '',
      showKeyboard: true
    };
  },
  props: {

  },
  computed: {
  },
  mounted() {
  },
  methods: {
    onInput(key) {
      this.value = (this.value + key).slice(0, 6);
      // 密码6位时验证
      if (this.value.length === 6) {
        this.$emit('change', this.value);
        this.value = '';
      }
    },
    onDelete() {
      this.value = this.value.slice(0, this.value.length - 1);
    }
  }
};
</script>
<style lang="scss" scoped>
.j-password-input{
  .van-password-input{
    margin: 20px 52px 0;
  }
  .van-password-input__security i{
      width: 20px;
      height: 20px;
      margin: -10px 0 0 -10px;
  }
  .van-password-input__security li{
    height: 100%;
    font-size: 40px;
    line-height: 110px;
    border-width:1px; /*no*/
    border-color: #d3d4d4;
    border-style: solid;
    margin-left:-1px;/*no*/
  }
  .van-password-input__security{
    height: 109px;
  }
  .van-hairline--left::after{
    display: none;
  }
  .van-hairline--surround::after {
    border-width: 1px;/*no*/
    border-color: #d3d4d4;
    display: none;
  }
  .van-key {
    height: 108px;
    font-size: 48px;
    font-style: normal;
    line-height: 108px;
  }
}

</style>
